<template>
    <div class="container">
        <van-form @submit="onSubmit">
            <div class="qiye-info">
                <div class="title">项目信息</div>
                <van-cell-group inset>
                    <van-field
                    v-model="form.companyName"
                    name="companyName"
                    label="投资单位："
                    placeholder="请输入投资单位"
                    :rules="[{ required: true, message: '请输入投资单位' }]"
                    />
                    <van-field
                    v-model="talentValue"
                    is-link
                    readonly
                    label="负责人："
                    placeholder="请选择负责人"
                    @click="showPicker1 = true"
                    :rules="[{ requiRd: true, message: '请选择负责人' }]"
                  />
                  <van-popup v-model:show="showPicker1" round position="bottom">
                    <van-picker
                      :columns="talentList"
                      @cancel="showPicker1 = false"
                      @confirm="onConfirm1"
                    />
                  </van-popup>
                    <van-field
                    v-model="form.phone"
                    name="phone"
                    label="联系方式："
                    placeholder="请输入联系方式"
                    :rules="[{ required: true, message: '请输入联系方式' }]"
                    />

                    <van-field
                    v-model="form.projectName"
                    name="projectName"
                    label="项目名称："
                    placeholder="请输入项目名称"
                    :rules="[{ required: true, message: '请输入项目名称' }]"
                    />
                    <van-field
                    v-model="form.projectCode"
                    name="projectCode"
                    label="项目编码："
                    placeholder="请输入项目名称"
                    :rules="[{ required: true, message: '请输入项目名称' }]"
                    />

                    <van-field
                    v-model="form.projectAmount"
                    name="projectAmount"
                    label="总额："
                    placeholder="请输入总额"
                    :rules="[{ required: true, message: '请输入总额' }]"
                    />
                    <van-field
                    v-model="form.investmentDirection"
                    name="investmentDirection"
                    label="投资方向："
                    placeholder="请输入投资方向"
                    :rules="[{ required: true, message: '请输入投资方向' }]"
                    />

                    <van-field
                    v-model="isjxValue"
                    is-link
                    label="是否结项："
                    placeholder="请选择是否结项"
                    @click="showPicker2 = true"
                    :rules="[{ required: true, message: '请选择是否结项' }]"
                  />
                  <van-popup v-model:show="showPicker2" round position="bottom">
                    <van-picker
                      :columns="isjxList"
                      @cancel="showPicker2 = false"
                      @confirm="onConfirm2"
                    />
                  </van-popup>

                  <van-field
                    v-model="prolevelValue"
                    is-link
                    label="项目级别："
                    placeholder="请选择项目级别"
                    @click="showPicker3 = true"
                    :rules="[{ required: true, message: '请选择项目级别' }]"
                  />
                  <van-popup v-model:show="showPicker3" round position="bottom">
                    <van-picker
                      :columns="prolevelList"
                      @cancel="showPicker3 = false"
                      @confirm="onConfirm3"
                    />
                  </van-popup>

                  <van-field
                    v-model="form.approvalTime"
                    is-link
                    label="立项时间："
                    placeholder="请选择立项时间"
                    @click="showApprovalTime = true"
                    :rules="[{ required: true, message: '请选择立项时间' }]"
                  />
                  <van-calendar v-model:show="showApprovalTime" @confirm="onConfirmTime" />

                  <van-field
                    v-model="form.intro"
                    name="intro"
                    label="项目简介："
                    placeholder="请输入项目简介"
                    :rules="[{ required: true, message: '请输入项目简介' }]"
                    />
                </van-cell-group>
            </div>
          <div class="addbtn">
            <van-button color='#1052CC' block type="primary" native-type="submit">
              确定
            </van-button>
          </div>
        </van-form>

    </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { onMounted } from 'vue'
import { showToast } from 'vant';
import { getProjectDetail,getTalentList,editProject,creatProject,getDictSelect } from '@/api/company';
import { localStorage } from '@/utils/local-storage';
const router = useRouter()
const route = useRoute();
const form = reactive({
  companyName: "泰州市数据产业集团有限单位",
  projectName: '',
  phone: '',
  projectAmount: '',
  projectCode: '',
  companyId: '91321200MACTU4PJ4N',
  investmentDirection: '',
  approvalTime: '',
  intro: ''
})

const onSubmit = () => {
  let { companyName, projectName, phone,projectAmount,projectCode,companyId,investmentDirection,intro,approvalTime} = form;
  const params = {
    companyName,
    projectName,
    phone,
    projectCode,
    projectAmount,
    companyId,
    investmentDirection,
    approvalTime,
    intro,
    personId: talentId.value,
    completeMark: isjxId.value,
    proLevel: prolevelId.value,

  }
  creatProject(params).then((res) => {
    if (res.code === 200) {
      showToast(res.msg)
      router.push({ path: '/CompanyInfo', query: { status: '2' }})
    } else {
      showToast(res.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}


const talentList = []
const getTalent = async () => {
  const { code, data } = await getTalentList({
    currentPage: 1,
    pageSize: 20,
    companyId: "91321200MACTU4PJ4N" 
  });
  if (code === 200) {
    data.list.forEach(item=>{
        talentList.push({
          text: item.name,
          value: item.personId
        })
      })
  }
}
console.log('talentList:',talentList);
const showPicker1 = ref(false);
const talentId = ref('')
const talentValue = ref('')
const onConfirm1 = ({ selectedOptions }) => {
  showPicker1.value = false;
  talentValue.value = selectedOptions[0]?.text;
  talentId.value = selectedOptions[0]?.value;
};

const isjxList = [
  { text: '是', value: '1' },
  { text: '否', value: '0' },
];
const showPicker2 = ref(false);
const isjxId = ref('')
const isjxValue = ref('')
const onConfirm2 = ({ selectedOptions }) => {
  showPicker2.value = false;
  isjxValue.value = selectedOptions[0]?.text;
  isjxId.value = selectedOptions[0]?.value;
};

const prolevelList = [];
const getLevelList = () => {
  getDictSelect('talent_project_level').then(res => {
    const {code,data} = res
    if(code === 200){
        data.forEach(item=>{
        prolevelList.push({
          text: item.fullName,
          value: item.enCode
        })
      })
    }
  })
}
const showPicker3 = ref(false);
const prolevelId = ref('')
const prolevelValue = ref('')
const onConfirm3 = ({ selectedOptions }) => {
  showPicker3.value = false;
  prolevelValue.value = selectedOptions[0]?.text;
  prolevelId.value = selectedOptions[0]?.value;
};


const date = ref('');
const showApprovalTime = ref(false);
const formatDate = (date) => `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
const onConfirmTime = (value) => {
  showApprovalTime.value = false;
  form.approvalTime = formatDate(value);
};



onMounted(() => {
  getTalent()
  getLevelList()
})
</script>
 

<style lang="scss" scoped>
.container {
  background: #f9f9f9;
  overflow: hidden;
  margin-bottom: 45px;
  padding: 0.9rem 1.3rem 1.7rem;
}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
}
.addbtn{
  position: fixed;
  bottom: 2rem;
  width: 92%;
  left: 4%;
}
.van-button{
  font-size: 1.8rem;
  font-weight: 400;
}
.van-form{
  padding: 0 0 2rem 0;
}
.van-cell-group{
  background: #fff;
}
.van-field{
 border-bottom: 1px solid #E0E0E4;
 padding: 2rem 0 1.6rem;
}
.title{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 1.2rem;
}
.qiye-info{
    background: #fff;
    padding: 1.2rem 0 1.5rem 0;
}
.qita{
    margin-top: 2rem;
    padding: 1.2rem;
    background: #fff;
    margin-bottom: 2.6rem;
}
.title2{
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
}
.title3{
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 0.9rem 0;
}

::v-deep .van-field__label{
  width: 10rem!important;
}

</style>